<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>发送微信消息</title>
    <%@include file="/WEB-INF/layouts/edit-header.jsp"%>
    <style type="text/css">
        .menu-ul {
            color:#666;
            background:url(${staticPath}/wechat/image/bg_mobile_foot.png);
            margin:0px;
            padding:0px;
            position:absolute;
            bottom:0px;
            left:0px;
            right:0px;
            height:51px;
            padding-left:42px;
            list-style: none;
            -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
            border-top: 1px solid #e7e7eb;
        }
        .menu-ul>li:first-child {
            border-left: none;
        }
        .menu-ul>li {
            float:left;
            height:51px;
            line-height: 51px;
            text-align: center;
            border-left: 1px solid #e7e7eb;
            border-top: 1px solid #e7e7eb;
            cursor:pointer;
            position: relative;
            margin-top:-1px;
        }
        .selected {
            border:1px solid #44b549 !important;
            color:#44b549;
        }
        .init-add {
            width:100%;
        }
        .half-li {
            width:50%;
        }
        .thirth-li {
            width:33.3%;
        }
        .sub_menu {
            display:none;
            color:#666;
            position: absolute;
            left: 0px;
            line-height: 0px;
            bottom: 130%;
            text-align: center;
            background-color: #fafafa;
            width:100%;
            border: 1px solid #d0d0d0;
        }
        .sub_menu ul {
            list-style-type: none;
            width:100%;
            margin:0px;
            padding:0px;
        }
        .sub_menu_li {
            line-height: 40px;
            border-top: 1px solid #d0d0d0;
        }
        .sub_menu_li:hover {
            background:#FFF;
        }
        .sub_menu_li:first-child {
            border-top: none;
        }
        .arrow {
            position: absolute;
            left: 50%;
            margin-left: -6px;
        }
        .arrow_in {
            bottom:-5px;
            display: inline-block;
            width: 0;
            height: 0;
            border-width: 6px;
            border-style: dashed;
            border-color: transparent;
            border-bottom-width: 0;
            border-top-color: #fafafa;
            border-top-style: solid;
        }
        .arrow_out {
            bottom:-6px;
            display: inline-block;
            width: 0;
            height: 0;
            border-width: 6px;
            border-style: dashed;
            border-color: transparent;
            border-bottom-width: 0;
            border-top-color: #d0d0d0;
            border-top-style: solid;
        }
        .mp-menu-add {
            background: url(${staticPath}/wechat/image/mp-menu-add.png) 0 0 no-repeat;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            display: inline-block;
            margin-top: -2px;
        }
        .mp-menu-add-g {
            background:url(${staticPath}/wechat/image/mp-menu-add.png) 0 -18px no-repeat;
        }



        .content>div {
            background:#FFF;
            border: 1px solid #e7e7eb;
            display:none;
        }
        .content .nav {
            list-style-type: none;
            border-bottom:1px solid #e7e7eb;

        }
        .content .nav>li {
            float:left;
            padding:10px 20px;
            cursor: pointer;
            color:#8d8d8d;
        }
        .content .nav>li.nav-selected {
            color:#000;
        }
        .content .box {
            height:160px;
            cursor:pointer;
            border: 2px dotted #d9dadc;
            text-align: center;
            color: #d9dadc;
            display: inline-block;
            margin:20px;
        }
        .content .box:hover {
            border-color: #b3b3b3;
            color:#b3b3b3;
        }
        .nav-content>div {
            display: none;
        }
        .menu-detail label {
            font-weight: normal;
            margin-right:10px;
        }
        .menu-detail .form-row {
            padding-top:20px;
        }
        .micon-add {
            background: url(${staticPath}/wechat/image/admin-wechat-menu-icon.png) 0 -2548px no-repeat;
            line-height: 300px;
            overflow: hidden;
            width: 36px;
            height: 36px;
            vertical-align: middle;
            display: inline-block;
        }
        .display {
            vertical-align: middle;
            margin-top:50px;
            font-size: 14px;
            text-align: center;
            line-height: normal;
            display: inline-block;
            color:#8d8d8d;
        }

        .tab_icon_doc {
            background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -240px no-repeat;
        }
        .nav-selected .tab_icon_doc {
            background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -270px no-repeat;
        }
        .tab_icon_pic {
            background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -60px no-repeat;
        }
        .nav-selected .tab_icon_pic {
            background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -90px no-repeat;
        }
        .tab_icon_voice {
            background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -180px no-repeat;
        }
        .nav-selected .tab_icon_voice {
            background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -210px no-repeat;
        }
        .tab_icon_video {
            background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -120px no-repeat;
        }
        .nav-selected .tab_icon_video {
            background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -150px no-repeat;
        }
        .tab_icon {
            margin-right: 3px;
            margin-top: -2px;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            display: inline-block;
        }
        .h-form {
            padding:20px;
        }
        .h-form .control-label {
            width:80px;
        }
        .h-form .form-control {
            width:300px;
        }
        .h-form .form-group {
            display:block !important;
            padding-top:10px;
            padding-bottom:10px;
        }
    </style>
</head>
<body>
    <div class="create-page tpanel">
        <div class="panel-content">
            <div class="container-fluid">

                <form id="createForm" class="form-horizontal">

                    <div class="form-group form-group-first">
                        <label for="kfAccount" class="col-sm-2 control-label">客服账号</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="kfAccount" name="kfAccount">
                                <option value="">不选择</option>
                                <c:forEach items="${kfAccounts}" var="kfAccount">
                                    <option value="${kfAccount.account}">${kfAccount.nickname}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="form-row content">
                        <div style="display:block;">
                    <div>
                        <ul class="nav">
                            <li class="">
                                <i class="tab_icon tab_icon_doc"></i>
                                图文消息
                            </li>
                            <li>
                                <i class="tab_icon tab_icon_pic"></i>
                                图片
                            </li>
                            <li class="nav-selected">
                                <i class="tab_icon tab_icon_text"></i>
                                文字
                            </li>
                            <li>
                                <i class="tab_icon tab_icon_voice"></i>
                                语音
                            </li>
                            <li>
                                <i class="tab_icon tab_icon_video"></i>
                                视频
                            </li>
                        </ul>
                        <div class="nav-content">
                            <div style="display: none;" class="container-fluid">
                                <div class="box col-xs-4">
                                    <div class="display">
                                        <i class="micon-add"></i><br><br>
                                        <span>从素材库中选择</span>
                                    </div>
                                </div>
                                <div class="box col-xs-4">
                                    <div class="display">
                                        <i class="micon-add"></i><br><br>
                                        <span>新建图文消息</span>
                                    </div>
                                </div>
                            </div>
                            <div class="container-fluid" style="display: none;">
                                <div class="box col-xs-4">
                                    <div class="display">
                                        <i class="micon-add"></i><br><br>
                                        <span>从素材库中选择</span>
                                    </div>
                                </div>
                                <div class="box col-xs-4">
                                    <div class="display">
                                        <i class="micon-add"></i><br><br>
                                        <span>上传图片</span>
                                    </div>
                                </div>
                            </div>
                            <div class="container-fluid" style="padding: 30px; display: block;">
                                <textarea id="text" class="form-control" style="width:100%;height:80px;">输入文字</textarea>
                            </div>
                            <div class="container-fluid" style="display: none;">
                                <div class="box col-xs-4">
                                    <div class="display">
                                        <i class="micon-add"></i><br><br>
                                        <span>从素材库中选择</span>
                                    </div>
                                </div>
                                <div class="box col-xs-4">
                                    <div class="display">
                                        <i class="micon-add"></i><br><br>
                                        <span>新建语音</span>
                                    </div>
                                </div>
                            </div>
                            <div class="container-fluid" style="display: none;">
                                <div class="box col-xs-4">
                                    <div class="display">
                                        <i class="micon-add"></i><br><br>
                                        <span>从素材库中选择</span>
                                    </div>
                                </div>
                                <div class="box col-xs-4">
                                    <div class="display">
                                        <i class="micon-add"></i><br><br>
                                        <span>新建视频</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        </div>
                    </div>

                        <div class="form-group form-group-first">
                            <div class="col-sm-12" style="text-align: center;">
                                    <a class="btn btn-default" href="javascript:window.history.back();">返回</a>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <a href="javascript:send()" class="btn btn-primary">发送</a>
                            </div>
                        </div>
                </form>

            </div>
        </div>
    </div>
                                                                
    <script type="text/javascript">
    changeTitle('发送微信消息');
    $(function() {

        $('.content .nav>li').click(function() {
            $('.content .nav>li').removeClass('nav-selected');
            $(this).addClass('nav-selected');
            $('.nav-content>div').hide();
            $('.nav-content>div').eq($(this).index()).show();
        });
    });
    var mediaId;
    function send() {
        var tabIcon = $('.content .nav>li.nav-selected').children('.tab_icon').first();
        var url = '${ctx}/admin/wechat/kf-message/send-media?mpId=${currentMpId}';
        var param = {};
        param.kfAccount = $('#kfAccount').val();
        param.openId = '${entity.fromUserName}';
        param.mediaId = mediaId;
        if(tabIcon.hasClass('tab_icon_text')) {
            url = '${ctx}/admin/wechat/kf-message/send-text?mpId=${currentMpId}';
            param.text = $('#text').val();
        }else if(tabIcon.hasClass('tab_icon_doc')) {
            param.msgType = 'news';
        }else if(tabIcon.hasClass('tab_icon_pic')) {
            param.msgType = 'image';
        }else if(tabIcon.hasClass('tab_icon_voice')) {
            param.msgType = 'voice';
        }else if(tabIcon.hasClass('tab_icon_video')) {
            param.msgType = 'video';
        }
        $.ajax({
            type: "POST",
            url: url,
            data: param,
            dataType: "json",
            success: function (data) {
                if(data.code == 'OK') {
                    topLayer.msg('发送成功', {icon: 1});
                }else {
                    topLayer.msg(resp.message, {icon: 2});
                }
            }
        });
    }
    </script>
</body>
</html>
